<link rel="stylesheet" href="/Public/assets/layui/css/layui.css">
<style>
    .layui-fixbar {
        display: none;
    }
    
    table {
        width: 100%;
        empty-cells: show;
        background-color: transparent;
        border-collapse: collapse;
        border-spacing: 0;
    }
    
    .table td {
        text-align: left;
    }
    
    .table th,
    .table td {
        padding: 8px;
        line-height: 20px;
    }
    
    ol>li>ol,
    ol>li>ul,
    ul>li>ol,
    ul>li>ul {
        margin: 0;
    }
    
    .va-t {
        vertical-align: top!important;
        min-height: 610px;
    }
</style>
<div class="widget-head" style="margin-top:0;">
    <div class="widget-title">分类管理</div>
</div>
<div style="padding:10px;background:#f8f8f8;margin-bottom:10px;">
    <form class="layui-form" id="change_group" action="{:U('cat')}" method="get">
        <div class="layui-form-item" style="margin-bottom:0;">
            <label class="layui-form-label" style="padding: 9px 0px;">分类分组：</label>
            <div class="layui-input-inline">
                <php>
                    $groups = M('CatsGroup')->select();
                </php>
                <select name="groupid" id="groupid" lay-filter="groupid" lay-filter="groupid" lay-verify="required" lay-search>
                    <option value="">请选择分组</option>
                    <foreach name="groups" item="vo" key="k">
                        <option value="{$vo.id}" <if condition="$_GET['groupid'] eq $vo['id']">selected</if>>{$vo.group_name}</option>
                    </foreach>
                </select>
            </div>
            <a href="javascript:open_iframe_dialog('/admin/cat/group.html','分组列表',['850px','600px'],1);" class="layui-btn layui-btn-normal"><i class="layui-icon"></i> 管理分组</a>
        </div>
    </form>
</div>

<table class="table">
    <tbody>
        <tr>
            <td width="200" class="va-t">
                <div class="mb-10">
                    操作：
                    <div class="layui-btn-group" id="action-type-btns">
                        <button class="layui-btn layui-btn-small layui-btn-danger" data-type="add">增加</button>
                        <button class="layui-btn layui-btn-small" data-type="edit">编辑</button>
                        <button class="layui-btn layui-btn-small" data-type="del">删除</button>
                    </div>
                </div>
                <ul id="catTree" style="margin-top:10px;"></ul>
            </td>
            <td class="va-t"><iframe id="catEditFrame" name="catEditFrame" frameborder="0" scrolling="AUTO" width="100%" height="610px" src="/admin/cat/edit/group_id/{$_GET['groupid']}"></iframe></td>
        </tr>
    </tbody>
</table>

<script>
    layui.use(['jquery', 'form', 'miniweb'], function() {
        var form = layui.form;
        var $ = layui.jquery;
        var groupId = $('#groupid').val();
        form.on('select(groupid)', function(data) {
            if (data.value != groupId) {
                $('#change_group').submit();
            }
        });
    });
    mini_callback();
    //提供给iframe回调的函数
    function mini_callback() {
        layui.use(['jquery', 'catadmin'], function() {
            var $ = layui.jquery;
            //console.log(layui.catadmin.loadTreeData);
            layui.catadmin.loadTreeData();
        });
    }
</script>